
<!-- 充值页面 -->
<template>
  <div class="app">
    <topbar/>

    <div class="bg_hui">
       <div class="container">
         <div class="name">优惠充值</div>
        </div>
    </div>

    <div class="bg_bai">
      <div class="container">

      <div class="box">

        <li>
          <span class="wp16">&nbsp;</span>
          <span class="wp28 c_b2b2b2">充值金额</span>
          <span class="wp28 c_b2b2b2">返现金券</span>
          <span class="wp28 c_b2b2b2">实得金额</span>
        </li>
        <div v-for="(item, index) in templatelist">
          <li>
          <span class="wp16" >
            <input type="radio" :id="radioid+index"   class="regular-radio" name="moneynum" v-model="moneynum" :value="item.recharge_amount"/>
            <label :for="radioid+index"></label>
         </span>

            <span class="wp28">￥ {{item.recharge_amount}}</span>
            <span class="wp28">￥ {{item.cashback_amount}}</span>
            <span class="wp28">￥ {{item.take_home_amount}}</span>
          </li>
        </div>
      </div>

<!-- 支付方式 -->
<div class="paymethod">
  <div class="left">支付方式</div>
  <div class="right">
            <input type="radio" id="radio-alipay" class="alipay" name="pay" v-model="paymethod" value="alipay"/>
            <label for="radio-alipay"></label>
            <input type="radio" id="radio-weixin" class="weixin" name="pay" v-model="paymethod" value="weixin"/>
            <label for="radio-weixin"></label>

  </div>
</div>



<!-- 实际支付 -->
          <div class="realpay">
            实际支付：<span class="money">￥ {{moneynum}}</span>

            <div class="rightinfo">
              我已阅读并同意 <span class="xieyi hand" @click="goXieyi"> 《文库充值协议》 </span>   <span class="chz hand" @click="gopay">立即充值</span>
            </div>
          </div>


        </div>
    </div>
    <!--<div class="mask" v-show="wxpay" @click="closewxpay">-->
      <!--<div class="wxbox">-->
        <!--<img :src="wxpayimg" alt="">-->
      <!--</div>-->
    <!--</div>-->
    <!--<div class="mask" v-show="wxpay" @click="closewxpay">-->
      <!--<div v-show="timeshou">支付成功{{jumpnum}}秒后跳转</div>-->
      <!--<div class="wxbox">-->
        <!--<img :src="wxpayimg" alt="">-->
        <!--<div v-show="timeshou">支付成功{{jumpnum}}秒后跳转</div>-->
      <!--</div>-->
    <!--</div>-->

    <div class="mask" v-show="wxpay" @click="closewxpay">
      <div class="wxbox">
        <div>扫码支付</div>
        <img :src="wxpayimg" alt="">
        <div style="font-size:14px">使用<span style="color:red">微信</span>APP扫码完成支付</div>

        <div  style="font-size:14px" v-show="timeshou">支付成功{{jumpnum}}秒后跳转</div>
      </div>
    </div>
    <div class="tipinfo" v-show="isTip">{{tipword}}</div>

 <Bottombar/>
</div>
</template>

<script>
import Topbar from '~/components/Topbar.vue'
import Rightinfo from '~/components/Rightinfo.vue'
import Bottombar from '~/components/Bottombar.vue'
import axios  from 'axios'
import qs from 'qs'
export default {
  components: {
    Topbar,
    Bottombar
  },
  data(){
    return{
      wxpay:false,
      wxpayimg:'',
      // moneynum:'0',
      paymethod:'alipay',
      user:'',
      templatelist:'',
      radioid:'radio',
      moneynum:10,
      jumpnum:0,
      timeshou:false,
      // 提示
      isTip:false,
      tipword:'',

    }
  },mounted(){
    this.loadData();
    // this.getSessionUser();

  },
 methods:{
   getSessionUser(){

     let key=localStorage.getItem("user_unique_code");
     if(key!=null && key!="" && key!=undefined){
       console.log("key "+key)
       axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
       )
         .then((response)=>{
           console.log("resultuser "+response.data);
           let result= response.data;
           if(result.code==1){
             console.log(result.data.trim())
             this.user=JSON.parse(result.data.trim());
             console.info("usermsg "+this.user)
             // if(this.user!=null && this.user!="" && this.user!=undefined){
             //   // this.poster=this.user.poster;
             //   // console.log("uuaa  "+this.user.mobile)
             //   // this.isLogin=true;
             // }
             this.loadData();
           }else{
             this.$router.push({path: '/'});
           }

         })
         .catch((error)=>{
           console.log(error)
         })

     }else{
       this.$router.push({path: '/'});
     }


   },
   goXieyi(){
     this.$router.push("/info/4");
   },
   closewxpay(){
     this.wxpay=false;
   },
    gopay(){
      //1.生成订单
      if(this.paymethod=='weixin'){
        this.productWxOrder();
      }else if (this.paymethod=='alipay') {
        this.productAliapyOrder();
      }
    },
    loadData(){
      this.user=JSON.parse(localStorage.getItem("user"));
      console.log("user  "+this.user)
      if(this.user!=null && this.user!="" && this.user!=undefined){
        axios.post('https://wenku.qikan.com:11000/admin/lib/getRechargeTemplate.html'
        )
          .then((response)=>{
            console.log(response.data);
            let result= response.data;

           this.templatelist=result;

          })
          .catch((error)=>{
            console.log(error)
          })
      }else{
        this.$router.push({path: '/'});
      }
    },
   productWxOrder(){
     let back_amount=0;
     if(this.moneynum==30){
       back_amount=5
     }
     if(this.moneynum==60){
       back_amount=12
     }
     if(this.moneynum==100){
       back_amount=20
     }
     if(this.moneynum==200){
       back_amount=45
     }
     axios.post('https://wenku.qikan.com:11000/getOrder.html',qs.stringify({'user_unique_code':this.user.unique_code,'pay_price':this.moneynum,'back_amount':back_amount,'order_type':1})
     )
       .then((response)=>{
         console.log(response.data);
         let result= response.data;
         let order_number=result.data;
         if(result.code==1){
           axios.post('https://wenku.qikan.com:11000/pay.html',qs.stringify({'order_number':result.data,'pay_price':this.moneynum})
           )
             .then((response)=>{
               console.log(response.data);
               let result= response.data;
               //window.location.href="http://qr.topscan.com/api.php?text="+result.code_url;
               console.log(result.code_url);
               this.wxpayimg="http://qr.topscan.com/api.php?text="+result.code_url;
               this.wxpay=true;
               let jump=0;
               var auth_timetimer =  setInterval(()=>{
                 axios.post('https://wenku.qikan.com:11000/admin/lib/getOrderStatus.html',qs.stringify({'order_number':order_number})
                 )
                   .then((response)=>{
                     console.log(response.data);
                     let result= response.data;

                     if(result.code==1){
                       this.tipshow("充值成功！");
                       clearInterval(auth_timetimer);
                       this.jumpnum=5;
                       let teotime=setInterval(()=>{
                         this.jumpnum--;
                         this.timeshou=true;
                         if(this.jumpnum<=0){
                           // this.sendAuthCode = true;
                           clearInterval(teotime);
                           this.wxpay=false;
                           this.timeshou=false;
                           this.$router.push({path: '/person/exchange'});
                           // window.location.href="https://wenku.qikan.com/article/?collkey="+this.collkey;

                         }
                       },1000);


                     }
                     jump++;
                     if(jump==15){
                       jump=0;
                       clearInterval(auth_timetimer);
                       // window.location.href="https://wenku.qikan.com/article/?collkey="+this.collkey;
                     }
                   })
                   .catch((error)=>{
                     console.log(error)
                   })

               }, 5000);
               // if(result.code==1){
               //
               // }else{
               //  console.log(result.message);
               // }
             })
             .catch((error)=>{
               console.log(error)
             })
         }else{
           console.log(result.message);
         }
       })
       .catch((error)=>{
         console.log(error)
       })

   },
   tipshow(e){
     this.tipword=e;
     this.isTip=true;
     setTimeout(() => {
       this.tipword='';
       this.isTip=false;
     }, 2000);
   },
   productAliapyOrder(){
     let back_amount=0;
     if(this.moneynum==30){
       back_amount=5
     }
     if(this.moneynum==60){
       back_amount=12
     }
     if(this.moneynum==100){
       back_amount=20
     }
     if(this.moneynum==200){
       back_amount=45
     }
     window.location.href="https://wenku.qikan.com:11000/alipay/amount?user_unique_code="+this.user.unique_code+"&pay_price="+this.moneynum+"&back_amount="+back_amount+"&order_type=1"

     // axios.post('https://wenku.qikan.com:11000/alipay/amount',qs.stringify({'user_unique_code':this.user.unique_code,'pay_price':this.moneynum,'back_amount':back_amount,'order_type':1})
     // )
     //   .then((response)=>{
     //     console.log(response.data);
     //     // let result= response.data;
     //     // if(result.code==1){
     //     //   axios.post('https://wenku.qikan.com:11000/pay.html',qs.stringify({'order_number':result.data,'pay_price':this.moneynum})
     //     //   )
     //     //     .then((response)=>{
     //     //       console.log(response.data);
     //     //       let result= response.data;
     //     //       //window.location.href="http://qr.topscan.com/api.php?text="+result.code_url;
     //     //       console.log(result.code_url);
     //     //       this.wxpayimg="http://qr.topscan.com/api.php?text="+result.code_url;
     //     //       this.wxpay=true;
     //     //       // if(result.code==1){
     //     //       //
     //     //       // }else{
     //     //       //  console.log(result.message);
     //     //       // }
     //     //     })
     //     //     .catch((error)=>{
     //     //       console.log(error)
     //     //     })
     //     // }else{
     //     //   console.log(result.message);
     //     // }
     //   })
     //   .catch((error)=>{
     //     console.log(error)
     //   })

   }
  }
}
</script>

<style scoped>

  .mask{ width: 100%; height: 100%; background: rgba(24,24,24,0.50); position: fixed;z-index: 999; left: 0; top: 0; }
  .wxbox{ position: fixed; z-index:1000; width: 280px; height: 360px; left: calc( 50% - 140px ); top : calc( 50% - 160px ); ;text-align:center; background-color: #fff; padding: 10px;}


  .bg_hui{ width: 100%; height: 50px; background: #E5E9F2;margin-top: 18px; }
.name{line-height: 50px; font-size: 16px;color: #475669;}
.bg_bai{ width: 100%; height: auto; overflow: hidden; padding-bottom: 150px; background: #fff;margin-bottom:100px;}

.box{ width: 100%; height: 300px; background: #fff; }
.box li{height: 50px; border-bottom: 1px solid #e5e5e5; line-height: 50px;}
.box li span{ display: inline-block; float: left;height:50px; line-height: 50px; font-size: 14px;color: #525252;}
.wp16{ width: 14%; padding-right: 30px; text-align: right;}
.wp28{ width: 28%; padding-left: 10px; }
.c_b2b2b2{color:#B2B2B2 !important;}

  .regular-radio{display: none;}
  .regular-radio + label{border: 1px solid #cacece;box-sizing:border-box;background-color: #fafafa;height: 12px;width: 12px;display: inline-block;border-radius: 50%;position: relative;cursor: pointer; margin-right:30px;}
  .regular-radio:checked + label:after{content: "";color: white;height: 12px;width: 12px;display: inline-block;
    position: absolute;top: -1px;left: -1px; background: #0084FF;border-radius: 50%;}

/*.regular-radio{display: none;}*/
/*.regular-radio + label{border: 1px solid #cacece;background-color: #fafafa;height: 12px;width: 12px;display: inline-block;border-radius: 50%;position: relative;cursor: pointer; margin-right:30px;}*/
/*.regular-radio:checked + label:after{content: "";color: white;height: 12px;width: 12px;display: inline-block;position: absolute;top: 0px;left: 0px; background: #0084FF;border-radius: 50%;}*/

.alipay{display: none;}
.alipay + label{width: 106px; height: 60px; background:url('../../assets/images/alipay0.png') left top no-repeat; background-size: 106px 60px;display: inline-block;position: relative;cursor: pointer; margin-right:30px;}
.alipay:checked + label:after{content: "";width: 106px; height: 60px; background:#fff url('../../assets/images/alipay1.png') left top no-repeat; background-size: 106px 60px;display: inline-block;position: absolute;top: 0px;left: 0px;}

.weixin{display: none;}
.weixin + label{width: 106px; height: 60px; background:url('../../assets/images/weixin0.png') left top no-repeat; background-size: 106px 60px;display: inline-block;position: relative;cursor: pointer; margin-right:30px;}
.weixin:checked + label:after{content: "";width: 106px; height: 60px; background:#fff url('../../assets/images/weixin1.png') left top no-repeat; background-size: 106px 60px;display: inline-block;position: absolute;top: 0px;left: 0px;}



.paymethod{ width: 100%; height: 60px; margin: 50px 0 26px;}
.paymethod .left{width: 125px; height: 60px; line-height: 60px; display: inline-block;float: left;}
.paymethod .right{ width: auto; height: 60px;display: inline-block;float: left; }


.realpay{ background: #f4f4f4; font-size: 14px; height: 88px; line-height: 88px; width: 100%; padding: 0 22px;}
.money{font-size: 20px; color: #0084FF;}
.rightinfo{ float: right; min-width: 500px; line-height: 80px; height: 80px; text-align: right; }
.chz{width: 126px; height: 38px; line-height: 38px; background: #0084FF; color:#fff; text-align: center; display: inline-block;vertical-align: middle;}
.xieyi{color:#4EA7FF;}
  .tipinfo{position: fixed; z-index: 9999; top: 50%; left: 50%; width: 400px;  height: 40px;border-radius: 10px; margin-left: -200px; margin-top: -20px; line-height: 40px;text-align: center;color: #fff; font-size: 14px; background-color: rgba(50,50,50,0.8)}

</style>
